<template>
    <div class="platform-page page">
        <img width="100%" src="/images/coach_training_banner.jpg"/>
        <div class="content">
            <PlatformCrumb back="赛事编辑/新增" style="    margin-top: 0;">
            </PlatformCrumb>
            <el-form :model="addMatchdata" :rules="rules" ref="addMatchdata" label-width="0px">
                <div class="content event-detail pl30">
                    <el-form-item prop="imgs">
                        <div class="upload-con display-flex-row">
                            <div class="upload-con-item">
                                <div class="sub-title">配图：</div>
                                <div class="peitu">
                                    <img v-if="addMatchdata.imgs" :src="addMatchdata.imgs|filtersImg" alt="">
                                    <el-upload
                                            ref='upload'
                                            :action='imgupload'
                                            class="upload-demo"
                                            accept="image/jpeg,image/gif,image/png"
                                            :show-file-list="false"
                                            name="file"
                                            :on-success="handleAvatarSuccess"
                                            multiple>
                                        <i class="el-icon-plus avatar-uploader-icon"></i>
                                        <div class="el-upload__text">点击上传</div>
                                    </el-upload>
                                </div>
                            </div>
                        </div>
                    </el-form-item>
                    <el-form-item prop="name">
                        <div class="matchEdititem">
                            <h2>赛事名称</h2>
                            <el-input type="text" class="w640" v-model="addMatchdata.name"
                                      placeholder="请输入名称"></el-input>
                        </div>
                    </el-form-item>

                    <el-form-item prop="venue">
                        <div class="matchEdititem">
                            <h2>场馆</h2>
                            <el-input type="text" class="w640" v-model="addMatchdata.venue"
                                      placeholder="请输入场地"></el-input>
                        </div>
                    </el-form-item>
                    <el-form-item prop="address">
                        <div class="matchEdititem">
                            <h2>地址</h2>
                            <el-input type="text" class="w640" v-model="addMatchdata.address"
                                      placeholder="请输入地址"></el-input>
                        </div>
                    </el-form-item>

                    <el-form-item prop="time">
                        <div class="matchEdititem">
                            <h2>时间</h2>
                            <el-date-picker
                                    class="w640"
                                    v-model="addMatchdata.time"
                                    type="datetime"
                                    placeholder="选择日期时间">
                            </el-date-picker>
                        </div>
                    </el-form-item>

                    <el-form-item prop="age">
                        <div class="matchEdititem">
                            <h2>参赛年龄</h2>
                            <el-input type="text" class="w640" v-model="addMatchdata.age"
                                      placeholder="请输入年龄"></el-input>
                        </div>
                    </el-form-item>

                    <el-form-item prop="count">
                        <div class="matchEdititem">
                            <h2>参赛队伍数量</h2>
                            <el-input type="number" class="w640" v-model="addMatchdata.count"
                                      placeholder="请输入数量"></el-input>
                        </div>
                    </el-form-item>

                    <el-form-item prop="money">
                        <div class="matchEdititem">
                            <h2>参赛费用</h2>
                            <el-input type="number" class="w640" v-model="addMatchdata.money"
                                      placeholder="请输入费用"></el-input>
                        </div>
                    </el-form-item>
                    <el-button class="savebtn2" @click="submitForm('addMatchdata')">保存</el-button>
                </div>
            </el-form>
        </div>
    </div>
</template>

<script>
    import PlatformCrumb from "@/components/PlatformCrumb.vue";
    import {addMatch, getDetail, editMatch, getRanksList} from '../../api/api/platform.js';
    import {baseImgPath, basefile,imgupload} from '@/config/env.js';

    export default {
        components: {
            PlatformCrumb
        },
        data() {
            return {
                id: this.$route.query.id ? this.$route.query.id : 0,
                data: {
                    id: this.$route.query.id ? this.$route.query.id : 0,
                },
                addMatchdata: {
                    "name": "",
                    "age": "",
                    "count": '',
                    "address": "",
                    "imgs": "",
                    "money": '',
                    "time": "",
                    "venue": ""
                },
                imgupload: imgupload,
                rules: {
                    name: [
                        {required: true, message: '请输入赛事名称', trigger: 'blur'},
                    ],
                    age: [
                        {required: true, message: '请输入参赛年龄', trigger: 'blur'},
                    ],
                    count: [
                        {required: true, message: '请输入参赛队伍数量', trigger: 'blur'},
                    ],
                    address: [
                        {required: true, message: '请输入地址', trigger: 'blur'},
                    ],
                    money: [
                        {required: true, message: '请输入参赛费用', trigger: 'blur'},
                    ],
                    time: [
                        {required: true, message: '请选择时间', trigger: 'blur'},
                    ],
                    venue: [
                        {required: true, message: '请输入场地', trigger: 'blur'},
                    ],
                    imgs: [
                        {required: true, message: '请上传配图', trigger: 'blur'},
                    ],
                },
            }
                ;
        },
        created() {
            this.getDetail2()
            this.getRanksList()
        },
        methods: {
            submitForm(formName) {
                var that = this;
                that.$refs[formName].validate((valid) => {
                    if (valid) {
                        if (that.id == 0) {
                            that.addMatch()
                        } else {
                            that.editMatch()
                        }
                    } else {
                        console.log('error submit!!');
                        return false;
                    }
                });
            },
            addMatch() {
                addMatch(this.addMatchdata).then(res => {
                    console.log(res);
                    if (res.code == 200) {
                        this.$message({
                            message: res.message,
                            type: 'success'
                        });
                        this.golist()
                    }
                });
            },
            editMatch() {
                editMatch(this.addMatchdata).then(res => {
                    console.log(res);
                    if (res.code == 200) {
                        this.$message({
                            message: res.message,
                            type: 'success'
                        });
                        this.golist()
                    }
                });
            },

            upLoad(file) {
                var that = this;
                var token = JSON.parse(localStorage.getItem("userInfo")).token;
                var reader = new FileReader();
                reader.readAsDataURL(file.file);
                reader.onload = function (e) {
                    axios({
                        method: 'post',
                        url: api.avatarUpload,

                        data: {
                            'file': this.result,
                            'type': 1
                        },
                        //转换数据的方法
                        transformRequest: [
                            function (data) {
                                let ret = '';
                                for (let it in data) {
                                    ret += encodeURIComponent(it) + '=' + encodeURIComponent(data[it]) + '&';
                                }
                                return ret;
                            }
                        ],
                        headers: {
                            'Content-Type': 'application/x-www-form-urlencoded',
                            'token': token
                        },
                    }).then(function (response) {
                        if (response.data.code == 1) {

                        } else {
                            Toast(response.data.msg);
                        }
                    }).catch(function (error) {
                    })
                }

            },
            getDetail() {
                var that = this;
                getDetail(this.data).then(res => {
                    if (res.code == 200) {
                        that.addMatchdata = res.data
                    }
                });
            },
            getDetail2() {
                if (this.id == 0) {

                } else {
                    this.getDetail()
                }
            },
            handleAvatarSuccess(res, file) {
                console.log(res);
                console.log(file);
                this.addMatchdata.imgs = res.data.path
                // this.addMatchdata.imgs = URL.createObjectURL(file.raw);
            },
            golist() {
                var that = this;
                that.$router.push({
                    path: '/platform/match',
                })
            },
        },
        filters: {
            filtersImg: function (img) {
                return basefile + img
            },
        }
    };
</script>
<style>
    .el-upload {
        width: 98px;
        height: 98px;
        display: flex;
        justify-content: center;
        align-items: center;
        flex-direction: column;
    }

    .upload-con .avatar-uploader-icon {
        height: 30px !important;
        width: 30px !important;
        line-height: 30px !important;
    }

    .el-upload-dragger {
        width: 98px !important;
        height: 98px !important;
        display: flex;
        justify-content: center;
        align-items: center;
        flex-direction: column;
    }

</style>
<style lang="less" scoped>
    @import url("platform.less");

    @deep: ~">>>";

    .operation {
        margin-right: 25px;
    }

    .upload {
        background: #fff;
        padding: 30px 130px;
    }

    .upload-item {
        margin-bottom: 30px;

        > .title {
            &::before {
                width: 4px;
                height: 18px;
                background-color: #c60818;
                display: inline-block;
                content: " ";
                margin-right: 10px;
                vertical-align: -3px;
            }

            .name {
                font-size: 16px;
            }

            .desc {
                font-size: 12px;
                color: #999;
                margin-left: 15px;
            }
        }
    }

    .upload-con {
        margin-top: 24px;

        @{deep} {
            .el-upload {
                border: 1px dashed #d9d9d9;
                border-radius: 6px;
                cursor: pointer;
                position: relative;
                overflow: hidden;

                &:hover {
                    border-color: #409eff;
                }
            }
        }

        .avatar-uploader-icon {
            font-size: 28px;
            color: #8c939d;
            width: 98px;
            height: 98px;
            line-height: 98px;
            text-align: center;
        }

        .avatar {
            width: 98px;
            height: 98px;
            display: block;
        }

        .sub-title {
            margin-bottom: 27px;
        }

        .upload-con-item {
            margin-right: 68px;

            @{deep} {
                .el-button {
                    margin-top: 20px;
                    float: right;
                }
            }
        }

    }
</style>
